大家好，我是喵橘，還有很多要好多部分報告和補充呢，繼續加油撰寫，在這之中也會不停摸索最適合的寫法。

框線設計

在前面章節有教導大家如何製作表格，但大家應該不太喜歡只有單一線條的狀況，可以用此功能來整理不同的框線設計。

border-style 語法

可以設計不同類型的框線，根據自己想要的設計感，來做出具有美感的表格。框線樣式如下表所顯示：

​
​

CSS
​

p { 
    border-style: double; 
}

​
HTML
​

<p>
    我是喵橘<br>
    大家早安，大家好!<br>
    喵呵呵~<br>
</p>

​
​
範例圖示：
​

​

border-color 語法

黑色的線條很醜不好看，我們也可以加上其他顏色，如下程式所顯示：

​

CSS
​

p { 
    p{ border-style: dashed; border-color: orange; }

}

​
HTML
​

<p>
    我是喵橘<br>
    大家早安，大家好!<br>
    喵呵呵~<br>
</p>

​
​
範例圖示：
​

​

分別設定框線方法

想要每個位置不同框線設計也可以，如下程式所顯示：

​

CSS
​

p { 
    border-style: dashed dotted solid double; border-color: orange;
}

​
HTML
​

<p>
    我是喵橘<br>
    大家早安，大家好!<br>
    喵呵呵~<br>
</p>

​
​
範例圖示：
​

​

單邊框線方法

想要只有一條框線也可以去做設定，如下程式所顯示：

​

CSS
​

p { 
    border-bottom-style:dotted; border-color: orange;
}

​
HTML
​

<p>
    我是喵橘<br>
    大家早安，大家好!<br>
    喵呵呵~<br>
</p>

​
​
範例圖示：
​

​

設定表格框線

在表格也有框線，也能進行設定，如下程式所示：

​

CSS
​

table {
    border: 3px dotted #F00;
}

th, td {
    border: 1px dotted #F00;
    padding: 5px;
}

​
HTML
​

<p>
<table>
    <tr>
        <th>姓名</th>
        <th>興趣</th>
    </tr>
    <tr>
        <td>吳劼澄</td>
        <td>看小說</td>
    </tr>
</table>
</p>

​
​
範例圖示：
​

​

border-radius 語法

假如不喜歡正正方方的框線，也能設定為圓角形狀。

​

CSS
​

table {
    border: 3px dotted #F00;
}

th, td {
    border: 1px dotted #F00;
    padding: 5px;
}

​
HTML
​

<p>
    我是喵橘<br>
    大家早安，大家好!<br>
    喵呵呵~<br>
</p>

​
​
範例圖示：
​

​

明天預告

​
今天是講解 CSS 框線設計語法，明天講解CSS盒子模型設定，謝謝大家。